<template>
  <div class="case-box">
    <div class="case-main">
      <p class="title webfont-Medium">
        2000+产品的增长专家
      </p>

      <p class="sub-title">金融、教育、出行、生活、游戏等领域数千款产品借助3YData，获得持续的用户增长
      </p>
    </div>
    <ul v-if="clientwidth>1080" class="case-list flex">
      <li
        v-for="(item,index) in caseList"
        :key="index"
        :class="index===hoverIndex?'case-item active':'case-item'"
        @mouseenter="handleEnter(index)"
      >
        <div class="item-main flex">
          <div class="item-lt">
            <p class="lt-title webfont-Medium">{{ item.title }}</p>
            <span :class="'iconfont '+ item.icon "></span>
          </div>
          <div class="item-rt">
            <span :class="'iconfont bg '+ item.icon "></span>
            <p class="rt-title webfont-Medium">{{ item.title }}</p>
            <p class="rt-subtitle">{{ item.disTitle }}</p>
            <div class="see pointer" @click="dialogTableVisible=true">
              <span>查看成功案例</span>
              <span class="iconfont icon-a-Vector4"></span>
            </div>
          </div>
        </div>
      </li>
    </ul>

    <!-- <div v-else class="case-swiper-box">
      <el-carousel ref="case-swiper" class="case-swiper" arrow="never" indicator-position="none" :autoplay="!dialogTableVisible">
        <el-carousel-item v-for="(item,index) in caseList" :key="index">
          <div class="item-rt">
            <span :class="'iconfont bg '+ item.icon "></span>
            <p class="rt-title webfont-Medium">{{ item.title }}</p>
            <p class="rt-subtitle">{{ item.disTitle }}</p>
            <div class="see pointer" @click="dialogTableVisible=true">
              <span>查看成功案例</span>
              <span class="iconfont icon-a-Vector4"></span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div> -->

    <div v-else class="case-swiper-box swiper-container" style="width: 100vw">
      <div class="swiper-wrapper case-swiper">
        <div v-for="(item,index) in caseList" :key="index" class="swiper-slide">
          <div class="item-rt">
            <span :class="'iconfont bg '+ item.icon "></span>
            <p class="rt-title webfont-Medium">{{ item.title }}</p>
            <p class="rt-subtitle">{{ item.disTitle }}</p>
            <div class="see pointer" @click="swiperStop(index)">
              <span>查看成功案例</span>
              <span class="iconfont icon-a-Vector4"></span>
            </div>
          </div>
        </div>
      </div>

    </div>

    <el-dialog
      :visible.sync="dialogTableVisible"
      :append-to-body="true"
      class="case-dig"
      :width="clientwidth>1080?'690px':'18.686rem'"
      @close="swiperStart"
    >
      <div class="dia-layout">
        <div class="dia-header" :style="'background-image: url('+bgimg+')'">
          <p class="title webfont-Medium">{{ caseList[hoverIndex].disTitle }}</p>
          <p class="sub-title">{{ caseList[hoverIndex].subTitle }}</p>
        </div>

        <div id="dia-chart" class="dia-chart">
          <img :src="caseList[hoverIndex].chartImg">
        </div>

        <div class="dia-footer">
          <p class="desc">{{ caseList[hoverIndex].des }}</p>
        </div>

      </div>
    </el-dialog>

  </div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
export default {
  name: '', // ·������
  data() {
    return {
      swiper: undefined,
      clientwidth: window.innerWidth,
      echartBox: undefined,
      hoverIndex: 2,
      dialogTableVisible: false,
      bgimg: require('@/assets/images/homepage/dia-bg.png'),

      caseList: [{
        title: '游戏类',
        disTitle: '新加坡，通过3YData代投，四个月内安装量成倍增长。',
        subTitle: '该游戏是国内某公司的出海产品，为了更好地进行推广，选择3YData代投。在拿到产品之后，3YData结合产品当前表现，建议客户采用ASO+ASA的方案进行优化投放。',
        des: '3YData首先帮助客户做好游戏的本地化优化策略，并通过ASO加强关键词覆盖，在客户产品做好基础准备之后，再通过ASA广告投放精准获客，在代投期间安装量逐月成倍增长，且CPI平均不到1美金， ROI超过130%，帮助客户成功敲开新加坡市场的大门。',
        img: require('@/assets/images/homepage/logo-1.svg'),
        chartImg: require('@/assets/images/homepage/chart-1.svg'),
        icon: 'icon-a-Group528'
      },
      {
        title: '社交类',
        disTitle: '中国台湾，某恋爱交友聊天平台，短时间内大量获客',
        subTitle: '该平台于2017年9月上架中国台湾区App Store后，借助3YData的ASO服务快速站稳脚跟，在它想要扩大运营规模时，选择3YData进行ASA广告代投。',
        des: '由于3YData对该平台进行了持续的ASO优化服务，对其产品有高度的认识，因此为其量身定制了一套初期以投放竞品词和行业词为主要方向的投放策略，让该平台在短时间内大量获客；随后3YData及时调整优化策略，逐渐降低转化成本；经过几个月的持续投放，该App的平均转化成本最终稳定在1.1美金左右，平均下载量也稳定增长',
        img: require('@/assets/images/homepage/logo-1.svg'),
        chartImg: require('@/assets/images/homepage/chart-2.svg'),
        icon: 'icon-shejiaolei'
      },
      {
        title: '购物类',
        disTitle: '美国，某针对中国人的购物平台，“黑五”另辟蹊径突围，销售额创App新高。',
        subTitle: '黑色星期五是美国重要的购物营销节日，节日前夕该购物平台找到3YData，希望能够在黑色星期五的购物狂欢中寻求机遇。',
        des: '3YData当即对美国黑色星期五期间ASA广告投放市场进行分析，最终决定结合该购物平台的性质，另辟蹊径地结合国内购物平台的部分关键词信息开展投放，最终在黑色星期五期间既避免了激烈的竞争，又让其销售额创下新高。',
        img: require('@/assets/images/homepage/logo-1.svg'),
        chartImg: require('@/assets/images/homepage/chart-3.svg'),
        icon: 'icon-gouwulei'
      },
      {
        title: '生活类',
        disTitle: '中国香港，某健身App，获客成本由7.2美元降到2美元。',
        subTitle: '该健身App由于缺乏专业的营销人员，在自投时忽略了很多投放细节，大量广告预算被消耗在关联较小的关键词上，投放消耗虽然较高，但效果不理想',
        des: '3YData在了解客户的需求之后，通过建立不同的广告系列，严格控制广告预算。为了进一步提高广告效果，还分别针对健身的男女不同用户群，采用了不同的素材集投放，成功让该App的转化成本由7.2美元，降低到了2美元左右。',
        img: require('@/assets/images/homepage/logo-1.svg'),
        chartImg: require('@/assets/images/homepage/chart-4.svg'),
        icon: 'icon-shenghuolei'
      },
      {
        title: '娱乐类',
        disTitle: '中国大陆区，某直播平台，平均每次转化成本仅2.58元，享受中国区第一波红利。',
        subTitle: '在苹果宣布开放中国大陆区ASA广告后，该直播平台作为3YData的老客户，希望3YData能够帮忙投放，3YData在接手后，从授权、资质等各个方面为其提供服务，让它成为中国大陆区第一批过审投放的App',
        des: '自7月底份开始投放之后，该直播平台下载量较未投放前每日增加500+，且平均每次转化成本仅为2.58元，尽享中国大陆区ASA广告的第一波流量红利。',
        img: require('@/assets/images/homepage/logo-1.svg'),
        chartImg: require('@/assets/images/homepage/chart-5.svg'),
        icon: 'icon-yulelei'
      },
      {
        title: '旅游类',
        disTitle: '泰国，某旅游软件，疫情期间保持增长稳定。',
        subTitle: '受疫情影响，客户的旅游App受到空前打击，一方面在寻求转型，另一方面也在寻求推广获客。',
        des: '3YData在仔细分析客户App功能之后，通过功能细分，放大本地旅游推荐售票服务，结合车票、机票、本地服务、预定等功能的创意集设定，再细分投放人群地区，一方面控制广告预算，另一方面也确保看到广告的人群确实在App的服务地区之内。经过长时间运营，虽然在疫情影响下有过短期的增长暂缓，但在调整之后尽管疫情反复，但该App表现较为评委，日增长仍维持在2000+。',
        img: require('@/assets/images/homepage/logo-1.svg'),
        chartImg: require('@/assets/images/homepage/chart-6.svg'),
        icon: 'icon-lvyoulei'

      },
      {
        title: '工具类',
        disTitle: '菲律宾，某VPN工具，下载量每日平均增长700+，平均转化率达新高。',
        subTitle: '对于VPN工具来说，各个国家和地区对它的需求都不一样，因此客户只想尽可能地用钱来获得展示和客户，在自投过程中平均转化率甚至低于15%。',
        des: '3YData针对客户需求，对于已知且稳定获客的关键词进行投放外，一方面通过拓词工具拓展新的关键词，一方面通过搜索匹配不断增加、筛选高质量关键词。通过几个月地不断监测调整，该VPN工具下载量每日平均增长700+，平均转化率也达到新高突破了37%。',
        img: require('@/assets/images/homepage/logo-1.svg'),
        chartImg: require('@/assets/images/homepage/chart-7.svg'),
        icon: 'icon-gongjulei'
      },
      {
        title: '金融类',
        disTitle: '菲律宾，某贷款平台，通过ASA广告平均下载转化率接近60%。',
        subTitle: '该金融类App在自投过程中，由于投放经验不足，转化率一直维持在30%左右，且平均转化费用在2.3美金左右，大量广告预算被无效的关键词消耗。',
        des: '3YData接受委托代投之后，为客户重新做了关键词优化方案，经过3个月的优化完善，最终转化率接近60%，平均转化费用为1.3美金左右，成功帮助客户实现低成本、精准获客的目的。',
        img: require('@/assets/images/homepage/logo-1.svg'),
        chartImg: require('@/assets/images/homepage/chart-8.svg'),
        icon: 'icon-money'
      }
      ]

    }
  },
  computed: {

  },
  watch: {
    clientwidth: { // �����Ķ���
      deep: true, // ���ȼ�������Ϊ true
      handler: function(newV, oldV) {
        if (oldV > 1080 && newV <= 1080) {

        }
      }
    }
  },
  // ������
  created() {},
  // ���غ�
  mounted() {
    window.addEventListener('resize', () => {
      this.clientwidth = window.innerWidth
    })

    if (this.clientwidth <= 1080) {
      this.swiper = undefined
      this.createSwiper()
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {})
  },
  // ���ٺ�
  destroyed() {

  },

  // ����
  methods: {
    handleEnter(index) {
      this.hoverIndex = index
    },
    createSwiper() {
      this.swiper = new Swiper('.swiper-container', {
        autoplay: 20000,
        loop: true,
        observer: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 20

      })
    },
    swiperStop(index) {
      this.hoverIndex = index
      this.dialogTableVisible = true
      this.swiper.stopAutoplay()
    },
    swiperStart() {
      return this.swiper && this.swiper.startAutoplay()
    }

  }
}
</script>

<style scoped lang="scss">
  @import "~@/styles/variables.scss";

  .case-box {
    position: relative;
    max-width: 100vw;
    min-width: 1200px;
    width: 100%;
    overflow: hidden;
    min-height: 400px;
    z-index: 1;

    &::after {
      display: block;
      content: '2';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 280px;
      background: #24BEBE;
      font-size: 0;
      z-index: 0;
    }

    .case-main {
      position: relative;
      z-index: 1;
      max-width: 1200px;
      width: 1200px;
      margin: 0 auto;
      padding-top: 60px;

      .title {
        font-size: 32px;
        line-height: 32px;
        color: #FFFFFF;
      }

      .sub-title {
        padding-top: 24px;
        padding-bottom: 32px;
        font-size: 14px;
        line-height: 14px;
        color: #FFFFFF;

      }
    }

    .case-list {
      max-width: 1200px;
      padding-bottom: 116px;
      width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 1;

      .case-item {
        overflow: hidden;
        width: 110px;
        height: 289px;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        position: relative;
        transition: width 0.5S ease;

        &.active {
          width: 374px;

          .item-main {
            left: -110px;
          }
        }

        .item-main {
          position: absolute;
          top: 0;
          left: 0;
          width: 484px;
          height: 289px;
          transition: left 0.5S ease;

          .item-lt {
            width: 110px;
            position: relative;
            overflow: hidden;

            .lt-title {
              position: relative;
              z-index: 1;
              width: 20px;
              font-size: 20px;
              line-height: 40px;
              margin: 82px auto;
            }

            span {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: #E0F6F6;
              font-size: 183px;
              z-index: 0;

            }

          }

          .item-rt {
            position: relative;
            width: 374px;
            height: 100%;
            background: #3d3d3d;
            opacity: 0.8;
            box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.1);
            border-radius: 4px;

            .bg {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              z-index: 0;
              color: #FFFFFF;
              opacity: 0.15;
              font-size: 200px;
            }

            p {
              color: #FFFFFF;

            }

            .rt-title {
              padding-top: 83px;
              padding-bottom: 20px;
              font-size: 20px;
              line-height: 20px;
              text-align: center;

            }

            .rt-subtitle {
              margin: 0 auto;
              text-align: left;
              width: 320.46px;
              font-size: 16px;
              line-height: 32px;

            }

            .see {
              margin-top: 70px;
              text-align: right;
              padding-right: 16px;

              span {
                color: #FFFFFF;
                font-size: 14px;
                line-height: 14px;
                margin-left: 12px;
              }

            }

          }

        }

      }

    }
  }

  .case-dig {
    ::v-deep.el-dialog {
      background: transparent;
    }

    ::v-deep.el-dialog__header {
      display: none;
    }

    ::v-deep .el-dialog__body {
      padding: 0 !important;
      border-radius: 5px;
      background-color: #FFFFFF;

      .dia-layout {
        border-radius: 5px;

        .dia-header {
          height: 261.75px;
          width: 100%;
          background-repeat: no-repeat;
          background-size: cover;
          padding: 50px 62px;

          p {
            width: 400px;
            color: #FFFFFF;
            text-align: justify;
          }

          .title {
            font-size: 20px;
            line-height: 32px;
            margin-bottom: 24px;
          }

          .sub-title {

            font-size: 14px;
            line-height: 24px;
          }
        }

        .dia-chart {
          text-align: center;
          padding-top: 14px;

          img {
            width: 654.54px;
            height: 195.54px;
          }
        }

        .dia-footer {
          padding: 16px 29px;
          padding-top: 8px;

          p {
            font-size: 12px;
            line-height: 23px;
            color: rgba(51, 64, 74, 0.8);
          }
        }
      }

    }

  }

  /* pc端小屏样式 */
  @media screen and (min-width: 1081px) and (max-width: 1240px) {

    .case-box .case-list,
    .case-box .case-main {
      transform: scale(0.9);
    }
  }

  @media screen and (max-width: 1080px) {
    .case-box {
      min-width: 100vw;
      width: 100vw;

      overflow: hidden;

      &::after {
        height: 17.469rem;
        background: rgba(21, 197, 206, 1);
      }

      .case-main {
        min-width: 100%;
        width: 100%;
        overflow: hidden;
        padding-top: 4.054rem;

        .title {
          margin-left: 1.314rem;
          font-weight: 500;
          font-size: 1.829rem;
          line-height: 1.829rem;
          letter-spacing: 0.011rem;
        }

        .sub-title {
          margin-left: 1.314rem;
          font-size: 0.8rem;
          line-height: 1.6rem;
          letter-spacing: 0.011rem;
          text-align: center;
        }

      }

      .case-swiper-box {
        width: 100vw;
        width: 16rem;
        margin: 0 auto;

        .case-swiper {
          height: 13rem;
          overflow-x: initial;

          /deep/.el-carousel__container {
            height: 12.216rem;
          }

          .el-carousel__item,
          .swiper-slide {
            width: 14.457rem;
            z-index: 1;
            border: 10px solid transparent;
            border-top: none;
            border-bottom: none;

            .item-rt {
              height: 13rem;
              width: 14.457rem;
              z-index: 1;
              background: rgba(61, 61, 61, 0.8);
              border-radius: 4px;
            }

            .bg {
              position: absolute;
              top: 1.045rem;
              left: 2.8rem;
              font-size: 9rem;
              color: rgba(255, 255, 255, 0.15);

            }

            .rt-title {
              padding-top: 2.731rem;
              color: rgba(255, 255, 255, 1);
              text-align: center;
              font-weight: 500;
              font-size: 1.371rem;
              line-height: 1.143rem;
            }

            .rt-subtitle {
              padding: 1.3rem 0.8rem;
              padding-bottom: 2.2rem;
              color: rgba(255, 255, 255, 1);
              text-align: center;
              font-size: 0.686rem;
              line-height: 1.8rem;
            }

            .see {
              padding-right: 0.89rem;
              color: rgba(255, 255, 255, 1);
              text-align: right;
              font-size: 0.571rem;
              line-height: 0.8rem;
              display: flex;
              align-items: center;
              justify-content: flex-end;

              span {
                margin-left: 8px;
              }
            }
          }
        }
      }
    }

    .case-dig {
      ::v-deep.el-dialog {
        background: transparent;
      }

      ::v-deep.el-dialog__header {
        display: none;
      }

      ::v-deep .el-dialog__body {
        padding: 0 !important;
        border-radius: 5px;
        background-color: #FFFFFF;

        .dia-layout {
          border-radius: 5px;

          .dia-header {

            height: 10rem;
            width: 100%;
            background-repeat: no-repeat;
            background-size: 103% 10rem;
            padding: 1.47rem 1.232rem;

            p {
              width: 400px;
              color: #FFFFFF;
              text-align: justify;
            }

            .title {
              margin-bottom: 0.42rem;
              width: 12.415rem;
              color: rgba(255, 255, 255, 1);
              font-weight: 500;
              font-size: 0.8rem;
              line-height: 1.371rem;
            }

            .sub-title {
              width: 11.643rem;
              height: 2.457rem;
              color: rgba(255, 255, 255, 1);
              font-size: 0.457rem;
              line-height: 0.914rem;
            }
          }

          .dia-chart {
            text-align: center;
            padding-top: 14px;

            img {
              width: 96%;
              height: auto;
            }
          }

          .dia-footer {
            padding: 0.343rem 0.762rem;
            border-radius: 4px;
            background: rgba(248, 250, 254, 1);

            p {
              color: rgba(51, 64, 74, 0.8);

              font-size: 0.457rem;
              line-height: 0.914rem;
            }
          }
        }

      }

    }

  }
</style>
